<template>
  <div style="background-color:#f3f5f7;">
    <div class="user-nav-wrapper">
      <div class="user-nav-img w">
        <el-avatar :size="60" :src="getUserInfo.avatar"></el-avatar>
        <!--        <el-avatar shape="square" :size="90" :src="getUserInfo.avatar"></el-avatar>-->
        <span>欢迎：{{getUserInfo.name}}</span>
      </div>
      </div>
    <div class="user-main w">
      <div class="user-main-d1">
        <div class="user-main-d1-left">
          <h4>会员积分剩余：</h4>
          <div class="user-main-d1-left-box">
            <span style="line-height: 80px">0积分</span>
          </div>
        </div>
        <div class="user-main-d1-right">
          <h4>当前会员等级：</h4>
          <div class="user-main-d1-right-box">
            <el-progress :percentage="percentage" :stroke-width="26" :text-inside="true" :format="format"
                         :color="customColorMethod" style="line-height: 80px"></el-progress>
          </div>
        </div>
      </div>
      <div>&nbsp;</div>
      <el-card class="box-card">
        <h3>尊敬的<span>黄金</span>会员，您享有以下特权</h3>
        <div class="userinfo-item" style="background-color: #B3C0D1;">
          <span class="userinfo-left">会员权益</span>
          <i style="color: #297640">翡翠</i>
          <i style="color: #ffff00">黄金</i>
        </div>
        <div class="userinfo-item">
          <span class="userinfo-left">客房预订优先候补</span>
          <i class="el-icon-check"></i>
          <i class="el-icon-check"></i>
        </div>
        <div class="userinfo-item">
          <span class="userinfo-left">选择贵宾金环会奖励积分或飞行里数</span>
          <i class="el-icon-check"></i>
          <i class="el-icon-check"></i>
        </div>
        <div class="userinfo-item">
          <span class="userinfo-left">专门区域优先办理入住及退房手续</span>
          <i class="el-icon-check"></i>
          <i class="el-icon-close"></i>
        </div>
        <div class="userinfo-item">
          <span class="userinfo-left">同伴同住并可享用会员等级早餐</span>
          <i class="el-icon-check"></i>
          <i class="el-icon-close"></i>
        </div>
        <div class="userinfo-item">
          <span class="userinfo-left">市区10公里免费接送</span>
          <i class="el-icon-check"></i>
          <i class="el-icon-close"></i>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Footer from "@/components/common/footer/Footer";
export default {
  name: "UserCenter",
  components: {Footer},
  data(){
    return{
      userInfo:{},
      percentage: 30,
    }
  },
  methods: {
    customColorMethod(percentage) {
      if (percentage < 50) {
        return 'rgba(243,177,6,0.98)';
      } else if (percentage < 70) {
        return '#40dc4d';
      } else {
        return '#f5f1f1';
      }
    },
    format(percentage){
      if (percentage<50)
        return '黄金会员'
      else if(percentage<100){
        return '翡翠会员'
      }else {
        return '钻石会员'
      }
    }
  },
  computed:{
    getUserInfo(){
      return this.$store.getters.getUserInfo
    }
  },
}
</script>

<style scoped>
  .w {
    width: 1200px;
    margin: 0 auto;
  }
  h4 {
    margin: 20px 0 20px 20px;
    padding: 0;
    font-size: 18px;
    font-weight: normal;
  }
  .user-nav-wrapper {
    height: 180px;
    background-image: url(//s.shangri-la.com/sl-fe-gc-prod/img/gold_bg.48d1ece.jpg);
  }
  .user-nav-img {
    padding-top: 30px;
    color: #ffffff;
  }
  .user-nav span {
    display: inline-block;
    padding: 0;
    margin: auto 0;
    color: #333333;
    font-size: 18px;
  }
  .user-main {
    margin-top: -80px;
  }
  .user-main-d1 {
    display: flex;
    background-color: #fff;
  }
  .user-main-d1-left {
    flex: 1;
  }
  .user-main-d1-left-box {
    display: inline-block;
    width: 400px ;
    height: 80px;
    margin: 0 20px 20px 20px;
    background-color: #efe7e7;
    text-align: center;
  }
  .user-main-d1-right {
    flex: 1;
  }
  .user-main-d1-right-box {
    display: inline-block;
    width: 700px ;
    height: 80px;
    margin: 0 20px 20px 20px;
    text-align: center;
    color: #050505;
  }
  .box-card {
    width: 100%;
    padding: 0 20px;
  }
  .userinfo-item {
    margin: 20px 0;
  }
  .userinfo-item i {
    float: right;
    width: 50px;
    margin-right: 30px;
  }
</style>